import { Button, Card, Form, FormInstance, Input, Radio, Upload, UploadFile } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import React, { useRef, useState } from "react";
import { RcFile, UploadProps } from "antd/lib/upload";
import { fileUpload, postCircleFriend } from "@/redux/modules/circleFriend/action";
import useMessage from "@/hooks/useMessage";
import styles from "./index.module.less";
import { flushSync } from "react-dom";

interface PropsType {
	onComfirm?: () => void;
}

const CircleFriendAdd: React.FC<PropsType> = props => {
	const { contextHolder, success, error } = useMessage();

	const { TextArea } = Input;
	const formRef = useRef<FormInstance | null>(null);

	const [fileList, setFileList] = useState<UploadFile[]>([]);
	const [uploading, setUploading] = useState(false);

	const handleUpload = async () => {
		const formData = new FormData();
		fileList.forEach(file => {
			formData.append("file", file as RcFile);
		});
		// setUploading(true);
		const res = await fileUpload(formData);
		return res;

		// You can use any AJAX library you like
		// fetch("https://www.mocky.io/v2/5cc8019d300000980a055e76", {
		// 	method: "POST",
		// 	body: formData
		// })
		// 	.then(res => res.json())
		// 	.then(() => {
		// 		setFileList([]);
		// 		message.success("upload successfully.");
		// 	})
		// 	.catch(() => {
		// 		message.error("upload failed.");
		// 	})
		// 	.finally(() => {
		// 		setUploading(false);
		// 	});
	};

	const props1: UploadProps = {
		onRemove: file => {
			const index = fileList.indexOf(file);
			const newFileList = fileList.slice();
			newFileList.splice(index, 1);
			setFileList(newFileList);
		},
		beforeUpload: file => {
			flushSync(() => {
				setFileList([...fileList, file]);
			});
			return false;
		},
		fileList,
		multiple: true
	};

	const onFinish = async (values: any) => {
		try {
			let files;
			if (fileList.length > 0) files = await handleUpload();
			postCircleFriend({ ...values, ...files });
			props.onComfirm && props.onComfirm();
			formRef.current?.resetFields();
			success("发布成功");
		} catch (err) {
			error("发布失败");
		}
	};

	return (
		<div className={styles.root}>
			{contextHolder}
			<Form
				ref={formRef}
				labelCol={{ span: 4 }}
				wrapperCol={{ span: 16 }}
				layout="horizontal"
				onFinish={onFinish}
				initialValues={{ top: 0 }}
			>
				<Form.Item label="内容" name="content">
					<TextArea rows={4} />
				</Form.Item>
				<Form.Item label="置顶" name="top">
					<Radio.Group>
						<Radio value={0}> 否 </Radio>
						<Radio value={1}> 是 </Radio>
					</Radio.Group>
				</Form.Item>
				<Form.Item label="文件" valuePropName="fileList">
					<Upload listType="picture-card" {...props1}>
						<div>
							<PlusOutlined />
							<div style={{ marginTop: 8 }}>上传文件</div>
						</div>
					</Upload>
				</Form.Item>
				{/* <Form.Item label="视频" valuePropName="fileList">
					<Upload action="/upload.do" listType="picture-card">
						<div>
							<PlusOutlined />
							<div style={{ marginTop: 8 }}>上传视频</div>
						</div>
					</Upload>
				</Form.Item> */}
				<Form.Item wrapperCol={{ offset: 4 }}>
					<Button htmlType="submit" type="primary">
						提交
					</Button>
				</Form.Item>
			</Form>
		</div>
		// <Card>
	);
};

export default CircleFriendAdd;
